<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
		
		<title>Gaggle</title>
		<style type="text/css" title="currentStyle">
			@import "media/css/demo_page.css";
			@import "media/css/demo_table.css";
			@import "media/css/enroll_now.css";
		</style>
		<script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
		<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				var exclusiveTable = $('.exclusive').dataTable( {
					"bProcessing": true,
					"sAjaxSource": 'sources/exclusive_listing.txt',
					"sPaginationType": 'full_numbers',
					"aoColumnDefs": [ {
      									"aTargets": [7],
									    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
								        	if ( sData ) {
								        		$(nTd).html('<a href="#" class="enrollnow">Enroll</a>');
								      		}
      									}
    								} ],
					"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
					
            		/* Append the grade to the default row class name */
            			if ( aData[0] )
            			{
            				var imageUrl = "<center><img width='45%' height='20%' src='/Volumes/Macintosh HD/Users/ravindra/Documents/Ravindra/Projects/gagglexy/media/images/" + aData[0] 							+ "' /></center>";
                			//$('td:eq(0)', nRow).html( imageUrl ).html ('<b>' + aData[0] + '</b>');
                			$('td:eq(0)', nRow).html( imageUrl );
            			}
            			/*if ( aData[7] )
            			{
            				var enrolUrl = "<a href='about:blank'>" + aData[7]+ "<a/>";
                			//$('td:eq(0)', nRow).html( imageUrl ).html ('<b>' + aData[0] + '</b>');
                			$('td:eq(7)', nRow).html( enrolUrl );
            			}*/
        			}
				} );
				var publicTable = $('.public').dataTable( {
					"bProcessing": true,
					"sAjaxSource": 'sources/public_listing.txt',
					"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
            		/* Append the grade to the default row class name */
            			if ( aData[0] )
            			{
            				var imageUrl = "<center><img width='45%' height='20%' src='/Volumes/Macintosh HD/Users/ravindra/Documents/Ravindra/Projects/gagglexy/media/images/" + aData[0] 							+ "' /></center>";
                			//$('td:eq(0)', nRow).html( imageUrl ).html ('<b>' + aData[0] + '</b>');
                			$('td:eq(0)', nRow).html( imageUrl );
            			}
            			if ( aData[7] )
            			{
            				var enrolUrl = "<a href='about:blank'>" + aData[7]+ "<a/>";
                			//$('td:eq(0)', nRow).html( imageUrl ).html ('<b>' + aData[0] + '</b>');
                			$('td:eq(7)', nRow).html( enrolUrl );
            			}
        			}
				} );
			} );
		</script>
	</head>
	<body id="dt_example">
		<div id="container">
			<div class="full_width big">
				Exclusive Listing
			</div>
			<div class="spacer"></div>
			
			<div id="dynamic">
				<table cellpadding="0" cellspacing="0" border="0" class="display dataTable exclusive">
					<thead>
						<tr>
							<th width="20%">Photo</th>
							<th width="15%">Name</th>
							<th width="10%">Location</th>
							<th width="10%">Time</th>
							<th width="5%">Days</th>
							<th width="10%">Class Title</th>
							<th width="10%">Total Cost</th>
							<th width="10%"></th>
						</tr>
					</thead>
					<tbody>
							
					</tbody>
				</table>
				
				<div class="clear"></div>	
				
								
				<div class="spacer"></div>
				<div class="spacer"></div>
				<div class="spacer"></div>
				
				<div class="full_width big">
					Public Listing
				</div>
				
				
				<div class="spacer"></div>
				
				<table cellpadding="0" cellspacing="0" border="0" class="display dataTable public">
					<thead>
						<tr>
							<th width="20%">Photo</th>
							<th width="15%">Name</th>
							<th width="10%">Location</th>
							<th width="10%">Time</th>
							<th width="5%">Days</th>
							<th width="10%">Class Title</th>
							<th width="10%">Total Cost</th>
							<th width="10%"></th>
						</tr>
					</thead>
					<tbody>
						
					</tbody>
				</table>
			</div>
			<div class="spacer"></div>
			
		</div>
	</body>
</html>